<template>
  <div class="page-register">
    <div class="header">
      <header>
        <div class="site-logo"></div>
        <div class="login">
          <span>已有美团账号</span>
          <router-link :to="{name: 'login'}">登录</router-link>
        </div>
      </header>
    </div>
    <div class="content">
<!--      双向数据绑定，验证器模块-->
      <el-form :model="registerForm"
               status-icon
               :rules="rules"
               ref="registerForm"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="用户名" prop="userName">
          <el-input type="text" v-model="registerForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="registerForm.password" autocomplete="off" @input="input"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-input type="password" v-model="registerForm.rePassword" autocomplete="off"></el-input>
          <div class="pw-strength">
            <div :class="['bar',strengthClass]"></div>
            <div class="letter">
              <span>强</span>
              <span>中</span>
              <span>弱</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('registerForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <footer></footer>
  </div>
</template>

<script>
  import api from '../api/index'
	export default {
		name: "register",
    data() {
		  var validateUser = (rule, value, callback) => {
		    if(value === '') {
		      callback(new Error('请输入用户名'));
        }else if(value.length < 4 || value.length > 16){
          callback(new Error("用户名必须为4-16位的字母数字下划线组成"));
        }else {
		      callback()
        }
      }
      var validatePass = (rule, value, callback) => {

        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.registerForm.rePassword !== ''){
            this.$refs.registerForm.validateField('rePassword')
          }
          callback()
        }
      };
      var validatePass2 = (rule, value, callback) => {

        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
      return {
            registerForm: {
              userName: '',
              password: '',
              rePassword: ''
            },
            strengthClass: '',
            rules: {
              userName: [
                {validator: validateUser, trigger: 'blur'}
              ],
              password: [
                {validator: validatePass, trigger: 'blur'}
              ],
              rePassword: [
                {validator: validatePass2, trigger: 'blur'}
              ],

            }
          }
		},
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {                                //验证信息成功
            api.register({                      //提交注册申请
              params: this.registerForm               //返回参数
            }).then((res) => {                        //回调函数
              if(res.data.status === 'success'){        //状态为success
                this.$router.push({name:'index'})       //  跳转主页
              }else{
                alert(res.data.msg)                     //返回失败信息
              }
            })
          } else {
            console.log('error submit!!');              //提交失败
            return false;
          }
        });
      },
      input() {
        var regStr = /(\w)+/g;
        var regNum = /(\d)+/g;
        var reg = /_/g;
        var strongth = this.registerForm.password.match(reg) &&
                       this.registerForm.password.match(regNum) &&
                       this.registerForm.password.match(regStr)
        if(this.registerForm.password.length >10 || this.registerForm.password.length > 6 && strongth){
          this.strengthClass = 'strong'
        }else if(!this.registerForm.password.length){
          this.strengthClass = ''
        }else if(this.registerForm.password.length < 6){
          this.strengthClass = 'week'
        }else {
          this.strengthClass = 'normal'
        }
      }
    }
	}
</script>

<style scoped lang="scss">
@import "../assets/css/register/index";
</style>
